<template>
  <div class="page-register">
    <article class="header">
      <header>
        <a href="/" class="site-logo"></a>
        <span class="login">
          <em class="bold">已有美团账号</em>
          <a href="/login">
            <el-button type="primary" size="small">登陆</el-button></a>
        </span>
      </header>
    </article>

    <section>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="昵称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
          <el-button size="mini" round @click="sendMsg">发送验证码</el-button>
          <span class="status">{{statusMsg}}</span>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input v-model="ruleForm.code" maxlength="4"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="ruleForm.pwd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="cpwd">
          <el-input v-model="ruleForm.cpwd" type="password"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="register">同意以下协议并注册</el-button>
          <div class="error">{{error}}</div>
        </el-form-item>

        <el-form-item>
          <a class="f1" href="http://www.meituan.com/about/terms"  target="_blank">《美团网用户协议》</a>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        </el-form-item>
      </el-form>
    </section>

  </div>
</template>
<script>
  import CryptoJS from 'crypto-js'
  export default {
    layout:'blank',
    data(){
      return{
        statusMsg:'',
        error:'',
        ruleForm:{
          name:'',
          email:'',
          code:'',
          pwd:'',
          cpwd:'',
        },
        rules:{
          name:[{
            require:true,type:'string',message:'请输入内容',trigger:'blur'
          }],
          email:[{
            require:true,type:'email',message:'请输入邮箱',trigger:'blur'
          }],
          pwd:[{
            require:true,message:'创建密码',trigger:'blur'
          }],
          cpwd:[{
            require:true,message:'确认密码',trigger:'blur'
          },{
            validator:(rule,value,callback)=>{
              if(value===''){
                callback(new Error('请再次输入密码'))
              }else if(value!==this.ruleForm.pwd){
                callback(new Error('两次输入密码不一致'))
              }else {
                callback()
              }
            },
            trigger:'blur'
          }],
        }
      }
    },
    methods:{
      sendMsg:function () {
        const self=this;
        let namePass;
        let emailPass;
        if(self.timerid){
          return false
        }
        this.$refs['ruleForm'].validateField('name',(valid)=>{
          namePass=valid
        });
        self.statusMsg=''
        if(namePass){
          return false
        }
        this.$refs['ruleForm'].validateField('email',(valid)=>{
          emailPass=valid
        });
        if(!namePass&&!emailPass){
          self.$axios.post('/users/verify',{
            username:encodeURLComponent(self.ruleForm.name), //进行转码
            email:self.ruleForm.email
          }).then(({status,data})=>{
            if(status===200&&data&&data.code===0){
              let count =60;
              self.statusMsg =`验证码已发送${count--}秒`;
              self.timerid = setInterval(function () {
                self.statusMsg =`验证码已发送${count--}秒`;
                if(count === 0){
                  clearTimeout(self.timerid)
                }
              },1000)
            }else {
              self.statusMsg =data.message;
            }
          })
        }
      },
      register:function () {
        let self=this;
        this.$self['ruleForm'].validate((valid)=>{
          if(valid){
            self.$axios.post('/users/signup',{
              username:window.encodeURIComponent(self.ruleForm.name),
              password:CryptoJS.MD5(self.ruleForm.pwd).toString(),
              email:self.ruleForm.email,
              code:self.ruleForm.code,
            }).then(({status,data})=>{
              if(status === 200){
                if(data&&data.code ===0){
                  location.href='/login'
                }else {
                  self.error=`服务器出错:${status}`
                }
                setTimeout(function () {
                  self.error=''
                },1500)
              }
            })
          }
        })

      },
      submitForm:function () {

      }
    }
  }

</script>
<style lang="scss">
  @import "@/assets/css/register/index.scss";
</style>
